<script setup lang="ts">
import { useRouter } from 'vue-router';

const showBar = ref(false);
const hideBg = ref(false);
const title = ref('');
const cachePage = ['index'];
const onClickLeft = () => history.back();

const router = useRouter();
router.beforeEach((to, _from, next) => {
  showBar.value = Boolean(to.meta.showBar);
  hideBg.value = Boolean(to.meta.hideBg);
  title.value = (to.meta.title as string) || '';
  next();
});
</script>

<template>
  <van-nav-bar
    v-show="showBar"
    fixed
    left-arrow
    safe-area-inset-top
    :placeholder="!hideBg"
    :class="{ noBg: hideBg }"
    :title="title"
    @click-left="onClickLeft"
  />
  <router-view v-slot="{ Component }">
    <keep-alive :max="6" :include="cachePage">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<style lang="scss">
.noBg {
  background-color: transparent !important;
}
.van-hairline--bottom:after {
  border-color: transparent;
}
</style>
